<%@ page language="java" pageEncoding="utf-8" %>
<%@taglib uri="/WEB-INF/page-base.tld" prefix="w" %>


<form id="_userselform2" method="post" action="/couponSet/CouponSetPage@userselQuery.page">
    <w:hidden bind="pageNum"/>
    <w:hidden bind="pageSize_"/>
    <div class="ui-queryBar" border="false" data-options="doSize:true" style="padding:4px;height:60px;">
        <table cellpadding="1" cellspacing="1">
            <tr>
                <td>
                    <w:text bind="bean.like" placeholder="用户名/单位名称/手机号"/>
                </td>
                <td>
                    <select name="bean.grade" style="width:200px;height:26px">
                        <option value="">-客户分组-</option>
                        <w:options bind="bean.grade" dict="UserGrade"/>
                    </select>
                </td>
                <td>
                    <select name="bean.pricegrade" style="width:200px;height:26px">
                        <option value="">-价格等级-</option>
                        <w:options bind="bean.pricegrade" dict="PriceGrade"/>
                    </select>
                </td>
                <td>
                    <select id="province" name="bean.province" onchange="choose(this.value)" style="height: 26px;">
                        <option value="">--请选择省--</option>
                        <w:iterate id="provint" bind="#province">
                            <option value="<w:write bind="#provint.name"/>"><w:write bind="#provint.name"/></option>
                        </w:iterate>
                    </select>

                    <select id="city" name="bean.city" disabled="disabled" style="height: 26px;">
                        <option value="">--请选择市--</option>
                    </select>
                </td>
            </tr>
        </table>
        <table cellpadding="1" cellspacing="1">
            <tr>
                <td>
                    <a href="javascript:;" class="easyui-linkbutton marginR8"
                       onclick="$w.execForm({form:$('#_userselform2'),pageNum:1})">查询</a>
                    <a href="javascript:;" class="easyui-linkbutton marginR8"
                       onclick="$('#_userselform2').get(0).reset()">重置</a>
                    <a href="javascript:;" class="easyui-linkbutton" onclick="userselok()">确定</a>
                </td>
            </tr>
        </table>
    </div>
</form>
<div class="ui_line" style="margin-top:10px"></div>
<table class="ui-table" width="100%" cellpadding="1" cellspacing="1" data-options="showPage:true,
																					pageNum:<w:write bind="pageNum"/>,
																					pageSize:<w:write bind="pageSize_"/>,
																					total:<w:write bind="pagination.totalCount"/>,form:'_userselform2'">
    <thead>
    <tr class="ui_th">
        <td align="center"><input id="selectAll" type="checkbox"></td>
        <td>用户名</td>
        <td>价格等级</td>
        <td>客户分组</td>
        <td>区域</td>
        <td>手机号</td>
        <td>单位名称</td>
    </tr>
    </thead>
    <tbody>
    <w:iterate id="info" bind="resultList_">
        <tr class="ui_td state<w:write bind="#info.state"/>">
            <td align="center"><input type="checkbox" name="primaryKey_" value="<w:write bind="#info.id"/>"></td>
            <td><w:write bind="#info.title"/></td>
            <td><w:write bind="#info.pricegrade" dict="PriceGrade"/></td>
            <td><w:write bind="#info.usergroup" dict="UserGroup"/></td>
            <td><w:write bind="#info.province"/>&nbsp;<w:write bind="#info.city"/></td>
            <td><w:write bind="#info.phone"/></td>
            <td><w:write bind="#info.name"/></td>
        </tr>
    </w:iterate>
    </tbody>
</table>
<Script>
    function userselok() {
        var sellist = [];
        $("[name='primaryKey_']", $w.currWin()).each(function () {
            if (this.checked) {
                var td = $(this).parent();
                sellist.push({
                    id: this.value,
                    loginname: td.next().text(),
                    nickname: td.next().next().text(),
                    grade: td.next().next().next().text(),
                    comname: td.next().next().next().next().next().text()
                });
            }
        })
        $w.closeCurrWin(sellist);
    }
    /**
     * 全选，反选,全部单选触发全选
     */
//    function selectAll(){
//        $("input[type='checkbox']").each( function() {
//            if($(this).prop("checked")==true) {
//                $("input[type='checkbox']").prop('checked', true);
//                return;
//            } else {
//                $("input[type='checkbox']").prop('checked', false);
//                return;
//            }
//        });
//    }
    $(function () {
        $('#selectAll').bind('click', function () {
            if (this.checked) {
                $("input[class^='sao']").each(function () {
                    $(this).prop('checked', true);
                })
            } else {
                $("input[class^='sao']").each(function () {
                    $(this).prop('checked', false);
                })
            }
        });
        var allLength = $("input[class^='sao']").length;
        $("input[class^='sao']").each(function () {
            $(this).bind('click', function () {
                var selectedLength = $("input[class^='sao']:checked").length;
                if (selectedLength == allLength) {
                    $('#selectAll').prop("checked", true);//全选按钮
                } else {
                    $('#selectAll').prop("checked", false);
                }

            })

        })
    })
    /**
     * 假数，数据交互时删除掉，创建一个二维数组
     * @type {Array}
     */
    var arr = new Array(4);
    arr[0] = ["广东", "广州市", "深圳市", "佛山市", "韶关市", "清远市", "肇庆市"];
    arr[1] = ["湖北", "荆州市", "武汉市", "赤壁市", "天门市"];
    arr[2] = ["广西", "南宁市", "桂林市", "百色市", "梧州市", "柳州市", "钦州市"];
    arr[3] = ["山东", "济南市", "德州市", "聊城市", "菏泽市", "泰安市", "莱芜市", "济宁市", "枣庄市", "临歧市", "日照市", "青岛市", "威海市", "烟台市", "潍坊市", "淄博市", "东营市", "滨州市",];

    function choose(val) {
        /**
         * 获取city的select
         * @type {Element}
         */
        var city = document.getElementById("city");
        /**
         * 获取option
         * @type {NodeList}
         */
        var cityOp = city.getElementsByTagName("option");
        /**
         * 设置可操作
         * @type {boolean}
         */
        city.disabled = false;
        /**
         * 先删除，后添加
         */
        for (var i = 0; i < cityOp.length; i++) {
            var op = cityOp[i];
            /**
             * 删除option
             */
            city.removeChild(op);
            /**
             * 数组长度发生变化，需处理
             */
            i--;
        }
        $.ajax({
            type: "get",
            url: ctx + "/couponSet/CouponSetPage@cityQuery.page?bean.pid=" + val,
            dataType: "json",
            success: function (ret) {
                var city_name = ret.city;
                for (var j = 0; j < city_name.length; j++) {
                    /**
                     * 获取城市名
                     */
                    var value = city_name[j].name;
                    /**
                     * 添加到city里面
                     */
                    city.options.add(new Option(value,value));
                }
            }
        })
    }
</Script>